<h3>注册</h3>
<form nz-form #form="ngForm">
  <nz-form-item class="mb-md">
    <nz-form-control nzErrorTip="请输入姓名！"
      [nzValidateStatus]="name.invalid && (name.dirty || name.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-user">
        <input #name="ngModel" autocomplete="off" nz-input [(ngModel)]="userDto.name" name="name" placeholder="姓名"
          required />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <!-- 
  <nz-form-item class="mb-md">
    <nz-form-control
      nzErrorTip="请选择学校！"
      [nzValidateStatus]="school.invalid && (school.dirty || school.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <app-school-select #school="ngModel" name="school" required [(ngModel)]="userDto.school.id"> </app-school-select>
    </nz-form-control>
  </nz-form-item> -->

  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="erroremail"
      [nzValidateStatus]="mail.invalid && (mail.dirty || mail.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-mail">
        <input #mail="ngModel" autocomplete="off" nz-input nzFor="email" [(ngModel)]="userDto.mail" name="mail"
          placeholder="邮箱" [userId]="userDto.id" app-async-email-validator required email />
      </nz-input-group>
      <ng-template #erroremail let-control>
        <ng-container *ngIf="mail.hasError('required')">
          请输入邮箱!
        </ng-container>
        <ng-container *ngIf="mail.hasError('email')">
          请输入正确邮箱!
        </ng-container>
        <ng-container *ngIf="mail.hasError('nameExists')">
          邮箱已被占用!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="erroridcard"
      [nzValidateStatus]="idCard.invalid && (idCard.dirty || idCard.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-idcard">
        <input #idCard="ngModel" autocomplete="off" nz-input nzFor="idCard" [(ngModel)]="userDto.idCard" name="idcard"
          placeholder="身份证" required />
      </nz-input-group>
      <ng-template #erroridcard let-control>
        <ng-container *ngIf="idCard.hasError('required')">
          请输入身份证!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>


  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="errormajor"
      [nzValidateStatus]="major.invalid && (major.dirty || major.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-read">
        <input #major="ngModel" autocomplete="off" nz-input nzFor="major" [(ngModel)]="userDto.major" name="major"
          placeholder="就读专业" required />
      </nz-input-group>
      <ng-template #errormajor let-control>
        <ng-container *ngIf="major.hasError('required')">
          请输入就读专业!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="erroreducational_institutions"
      [nzValidateStatus]="educational_institutions.invalid && (educational_institutions.dirty || educational_institutions.touched) ? 'error' : ''"
      nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-bank">
        <input #educational_institutions="ngModel" autocomplete="off" nz-input nzFor="educational_institutions"
          [(ngModel)]="userDto.educational_institutions" name="educational_institutions" placeholder="就读院校" required />
      </nz-input-group>
      <ng-template #erroreducational_institutions let-control>
        <ng-container *ngIf="educational_institutions.hasError('required')">
          请输入就读院校!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="erroregrade"
      [nzValidateStatus]="grade.invalid && (grade.dirty || grade.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-bank">
        <input #grade="ngModel" autocomplete="off" nz-input nzFor="grade" [(ngModel)]="userDto.grade" name="grade"
          placeholder="年级" required />
      </nz-input-group>
      <ng-template #erroregrade let-control>
        <ng-container *ngIf="grade.hasError('required')">
          请输入年级!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control [nzErrorTip]="erroraccout"
      [nzValidateStatus]="account.invalid && (account.dirty || account.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-user">
        <input #account="ngModel" autocomplete="off" nz-input [(ngModel)]="userDto.account" name="account"
          [userId]="userDto.id" app-async-account-validator placeholder="登录名" required />
      </nz-input-group>
      <ng-template #erroraccout let-control>
        <ng-container *ngIf="account.hasError('required')">
          请输入登录名!
        </ng-container>
        <ng-container *ngIf="account.hasError('nameExists')">
          登录名已被占用!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control [nzErrorTip]="errorTpl"
      [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''" nzHasFeedback>
      <nz-input-group nzPrefixIcon="anticon anticon-lock">
        <input #password="ngModel" autocomplete="off" nz-input style="height: 38px;" type="password"
          [(ngModel)]="userDto.password" name="password" placeholder="密码" required />
      </nz-input-group>
      <app-password-strength [password]="userDto.password" [(level)]="level"></app-password-strength>
      <ng-template #errorTpl let-control>
        <ng-container *ngIf="password.hasError('required')">
          应请填写最少8位密码!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" (click)="validate(true)" [nzLoading]="loading"
      class="submit">
      提交
    </button>
    <a class="login" routerLink="/passport/login">登录</a>
  </nz-form-item>
</form>
